<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui.form小例子</title>
    <link rel="stylesheet" href="../../../static/layui/dist/layuiadmin/layui/css/layui.css" media="all">
</head>

<body>
    <div style="margin:3%;">
        <form id="popupForm" class="layui-form" action="preAdd" method="POST">
            <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
            <div class="layui-row">
                <div class="layui-col-md9">
                    <div class="layui-form-item">
                        <label class="layui-form-label">角色名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" placeholder="角色名称" autocomplete="off" class="layui-input"
                                lay-verify="required|nickname">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md9">
                    <div class="layui-form-item">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-block">
                            <input type="text" name="desc" placeholder="描述" autocomplete="off" class="layui-input"
                                lay-verify="required|nickname">
                        </div>
                    </div>
                </div>
            </div>



            <!-- <div class="layui-form-item">
            <label class="layui-form-label">下拉选择框</label>
            <div class="layui-input-block">
                <select name="interest" lay-filter="aihao">
                    <option value="0">写作</option>
                    <option value="1">阅读</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="写作">
                <input type="checkbox" name="like[read]" title="阅读">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开关关</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开关开</label>
            <div class="layui-input-block">
                <input type="checkbox" checked lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="0" title="男">
                <input type="radio" name="sex" value="1" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">请填写描述</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div> -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="commit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
            <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
        </form>
    </div>

    <script src="../../../static/layui/dist/layuiadmin/layui/layui.js"></script>
    <script>
        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;

            //监听submit提交按钮 button ，lay-filter 为 userAdd 的
            form.on('submit(commit)', function (data) {
                console.log(JSON.stringify(data.field))
                //此段代码可以获取提交的数据
                var $ = layui.$
                //ajax 提交
                $.ajax({
                    type: "POST",
                    dataType: "text",
                    url: "preAdd",//url
                    data: $('#popupForm').serialize(),  //表单数据
                    success: function (data) {
                        var _data = eval("(" + data + ")")
                        console.log(_data.state)
                        if (_data.state == 1) {
                            layer.msg('添加成功，1秒后自动关闭该窗口');
                            //延迟1秒执行，目的是让用户看到提示
                            setTimeout(function () {
                                //1、先得到当前iframe层（弹出层）的索引  ///2、提交成功关闭弹出层窗口
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            }, 1 * 1000);
                        } else {
                            layer.msg(_data.state);
                        };
                    },
                    error: function () {
                    }
                });
                //阻止页面跳转
                return false;
            });

            //自定义表单验证
            //lay-verify ：对应userr、pass、等，required 为必填项
            form.verify({
                user_name: function (value) {
                    if (value.length < 2) {
                        return '用户名至少得2个字符啊';
                    }
                }
                ,
                not_blank: function (value) {
                    if (value.length < 2) {
                        return '用户名至少得2个字符啊';
                    }
                }
                , password: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
                , content: function (value) {
                    layedit.sync(editIndex);
                }
            });
        });
        // layui.use(['form', 'layedit', 'laydate'], function () {
        //     var form = layui.form
        //         , layer = layui.layer
        //         , layedit = layui.layedit
        //         , laydate = layui.laydate;

        //     //自定义表单验证
        //     //lay-verify ：对应userr、pass、等，required 为必填项
        //     form.verify({
        //         user: function (value) {
        //             if (value.length < 2) {
        //                 return '用户名至少得2个字符啊';
        //             }
        //         }
        //         , pass: [
        //             /^[\S]{6,12}$/
        //             , '密码必须6到12位，且不能出现空格'
        //         ]
        //         , content: function (value) {
        //             layedit.sync(editIndex);
        //         }
        //     });
        // });
    </script>
</body>

</html>